<template>
  <div class="customsData">
    <el-table :data="table">
      <el-table-column label="序号" align="center" type="index" width="80">
      </el-table-column>
      <el-table-column label="采购商">
        <template slot-scope="scope">
          <div class="line">
            <b title="翻译" @click="trans(scope.row.name)">译</b>
            <p @click="$router.push(`/automation/customsData/buyerDetail/${scope.row.id}`)"
               :title="scope.row.name" class="more">{{scope.row.name}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="供应商">
        <template slot-scope="scope">
          <div class="line">
            <b title="翻译">译</b>
            <p @click="$router.push(`/automation/customsData/sellerDetail/${scope.row.id}`)"
               :title="scope.row.seller" class="more">{{scope.row.seller}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="产品描述">
        <template slot-scope="scope">
          <div class="line">
            <b title="翻译">译</b>
            <p :title="scope.row.desc" class="more">{{scope.row.desc}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="time" width="180">
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <span class="icon-review iconBtn" title="预览" @click="showDrawer(scope.row.id)"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="total>0"
                   background align="right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="10"
                   layout="prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <avue-drawer v-model="dialogVisible" :width="700" style="background-color:#F5F5F5;">
      <div class="drawer">
        <h1 class="title"><i class="iconfont icon-fanhui" @click="dialogVisible=false"></i> 海关数据详情</h1>
        <div class="box">
          <h2 class="box-title">贸易信息</h2>
          <ul>
            <li>采购商：<span>SIA BALT TRANS AGENCY</span></li>
            <li>采购商地址：<span>SIA BALT TRANS AGENCY</span></li>
            <li>供应商：<span>SIA BALT TRANS AGENCY</span></li>
            <li>供应商地址：<span>SIA BALT TRANS AGENCY</span></li>
          </ul>
        </div>
        <div class="box">
          <h2 class="box-title">产品信息</h2>
          <ul>
            <li>重量：<span>SIA BALT TRANS AGENCY</span></li>
            <li>数量：<span>SIA BALT TRANS AGENCY</span></li>
            <li>US$：<span>SIA BALT TRANS AGENCY</span></li>
            <li>HS编码：<span>SIA BALT TRANS AGENCY</span></li>
            <li>HS编码描述：<span>HEAT EXCHANGER 1131 COLLI PACKED ON 31 PALLETS HS CODE 85161011,
              85161080 HEAT EXCHANGER HS:851610||HEAT EXCHANGER 1131 COLLI PAC
              KED ON 31 PALLETS HS CODE 85161011, 85161080 HEAT EXCHANGER HS:841861</span></li>
          </ul>
        </div>
        <div class="box">
          <h2 class="box-title">货运信息</h2>
          <ul>
            <li>启运港：<span>SLIVERPOOL</span></li>
            <li>抵达港：<span>SIA BALENCY</span></li>
            <li>运输方式：<span>SIA BALT TRANS AGENCY</span></li>
            <li>日期：<span>2019-05-15</span></li>
            <li>承运人：<span>无</span></li>
            <li>原产国：<span>SIA BALT TRANS AGENCY</span></li>
          </ul>
        </div>
        <el-footer>
          <el-button type="primary" size="mini">上一条</el-button><b>1/10</b><el-button type="primary" size="mini">下一条</el-button>
        </el-footer>
      </div>
    </avue-drawer>
  </div>
</template>

<script>
    import {translate} from "@/api/common/thirdparty";

    export default {
        name: "CustomsData",
        data() {
            return {
                table: [{
                    name: 'good',
                    seller: 'SIA BALT TRANS AGENCY',
                    desc: 'COLLATED NAILS 1131 CTNS I ',
                    time: '2019-08-05',
                    id: 1
                }],
                total: 0,
                currentSize: 10,
                currentPage: 1,
                dialogVisible: false
            }
        },
        methods: {
            showDrawer(id) {
                console.log(id)
                this.dialogVisible = true;
            },
            //翻译
            trans(str) {
                translate(str).then(res => {
                    console.log(res)
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.currentSize = size
                // this.init()
            },
            handleCurrentChange(page) { //页数发生变化
                this.currentPage = page
                // this.init()
            }
        }
    }
</script>

<style scoped lang="scss">
  .customsData {
    .el-table {
      font-size: 13px;
      p,
      span{
        cursor: pointer;
      }
      .cell {
        .line {
          display: flex;
          align-items: center;

          p {
            width: calc(100% - 23px);
          }

          b {
            width: 20px;
            height: 20px;
            color: #fff;
            font-weight: normal;
            border-radius: 50%;
            background: #2a97f9;
            display: inline-block;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            cursor: pointer;
            margin-right: 3px;
          }
        }

      }
    }

    .drawer {
      padding: 10px 15px;

      .title {
        font-size: 16px;
        color: #435B77;
        font-weight: 600;
        margin-bottom: 20px;
        i {
          font-size: 18px;
          color: #2A97F9;
          margin-right: 5px;
        }
      }

      .box {
        margin: 15px 0;
        padding: 10px 15px;
        border-radius: 8px;
        background-color: #fff;

        .box-title {
          color: #2A97F9;
          font-size: 15px;
          font-weight: normal;
          line-height: 40px;
          border-bottom: 1px solid #ddd;
        }

        ul {
          margin-top: 10px !important;

          li {
            line-height: 35px;
            font-size: 13px;
            color: #435B77;

            span {
              color: #435B77;
            }
          }
        }

      }
      .el-footer{
        text-align: center;
        height: 33px !important;
        line-height: 42px;
        b{
          margin:  0 15px;
        }
      }
    }
  }
</style>
